<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <!-- 引入组件库 -->
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script src="../js/axios-0.18.0.js"></script>
        <style>
        </style>
    </head>
    <body >
        <div id="app">
            <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
          </el-input>
    <el-table
    :data="menuList"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children:'children', hasChildren:'hasChildren'}">
    <el-table-column
      prop="name"
      label="菜单名"
      sortable
      width="160">
    </el-table-column>
    <el-table-column
      prop="linkUrl"
      label="菜单控制页面"
      sortable
      width="160">
    </el-table-column>
    <el-table-column width="160"
      prop="path"
      label="菜单层级">
    </el-table-column>
    <el-table-column
            width="160"
      prop="priority"
      label="菜单优先级">
    </el-table-column>
    <el-table-column
    prop="icon"
    label="菜单图标">
  </el-table-column>
  <el-table-column
  prop="description"
  label="描述">
</el-table-column>
<!--操作按钮-->
<el-table-column
  label="操作">
  <template slot-scope="scope" width="160">
    <el-button
    v-if="scope.row.level ==0"
    type="text"
    size="mini"
    @click="addOneMenu(scope.row.id)">添加一级菜单
  </el-button>
    <el-button
    v-if="scope.row.level ==1"
    type="text"
    size="mini"
    @click="addTwoMenu(scope.row.id)">添加二级菜单
  </el-button>
  <el-button
  v-if="scope.row.level ==1"
  type="text"
  size="mini"
  @click="editOneMenu(scope.row)">修改一级菜单
</el-button>
<el-button
  v-if="scope.row.level ==2"
  type="text"
  size="mini"
  @click="editTwoMenu(scope.row)">修改二级菜单
</el-button>
<el-button
        v-if="scope.row.level !=0"
  type="text"
  size="mini"
  @click="deleteMenu(scope.row.id)">删除菜单
</el-button>
  </template>
</el-table-column>
  </el-table>
            <!--添加一级菜单-->
  <el-dialog :visible.sync="dialogAddOneFormVisible" :title="dialogAddOneFormValue">
    <el-form ref="menu" :model="addOneMenuForm"  label-width="120px">
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="addOneMenuForm.name"/>
      </el-form-item>
      <el-form-item label="菜单层级" prop="path">
        <el-input v-model="addOneMenuForm.path"/>
      </el-form-item>
      <el-form-item label="菜单优先级" prop="priority">
        <el-input v-model="addOneMenuForm.priority"/>
      </el-form-item>
      <el-form-item label="菜单图标" prop="icon">
        <el-input v-model="addOneMenuForm.icon"/>
      </el-form-item>
      <el-form-item label="菜单描述" prop="description">
        <el-input v-model="addOneMenuForm.description"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="restOneMenuData()">取 消</el-button>
      <el-button type="primary" @click="appendOneMenu()">确 定</el-button>
    </div>
  </el-dialog>
          <!--添加二级菜单-->
            <el-dialog :visible.sync="dialogAddTwoFormVisible" :title="dialogAddTwoFormValue">
                <el-form ref="menuTwo" :model="addTwoMenuForm"  label-width="120px">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="addTwoMenuForm.name"/>
                    </el-form-item>
                    <el-form-item label="菜单控制界面" prop="linkUrl">
                        <el-input v-model="addTwoMenuForm.linkUrl"/>
                    </el-form-item>
                    <el-form-item label="菜单层级" prop="path">
                        <el-input v-model="addTwoMenuForm.path"/>
                    </el-form-item>
                    <el-form-item label="菜单优先级" prop="priority">
                        <el-input v-model="addTwoMenuForm.priority"/>
                    </el-form-item>
                    <el-form-item label="菜单图标" prop="icon">
                        <el-input v-model="addTwoMenuForm.icon"/>
                    </el-form-item>
                    <el-form-item label="菜单描述" prop="description">
                        <el-input v-model="addTwoMenuForm.description"/>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="restTwoMenuData()">取 消</el-button>
                    <el-button type="primary" @click="appendTwoMenu()">确 定</el-button>
                </div>
            </el-dialog>

            <!--修改一级菜单-->
            <el-dialog :visible.sync="dialogEditOneFormVisible" title="修改一级菜单">
                <el-form v-model="editOneMenuForm"  label-width="120px">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="editOneMenuForm.name"/>
                    </el-form-item>
                    <el-form-item label="菜单层级" prop="path">
                        <el-input v-model="editOneMenuForm.path"/>
                    </el-form-item>
                    <el-form-item label="菜单优先级" prop="priority">
                        <el-input v-model="editOneMenuForm.priority"/>
                    </el-form-item>
                    <el-form-item label="菜单图标" prop="icon">
                        <el-input v-model="editOneMenuForm.icon"/>
                    </el-form-item>
                    <el-form-item label="菜单描述" prop="description">
                        <el-input v-model="editOneMenuForm.description"/>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="resteditOneMenuData()">取 消</el-button>
                    <el-button type="primary" @click="editOneMenuSure()">确 定</el-button>
                </div>
            </el-dialog>


            <!--修改二级菜单-->
            <el-dialog :visible.sync="dialogEditTwoFormVisible" title="修改二级菜单">
                <el-form  v-model="EditTwoMenuForm"  label-width="120px">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="EditTwoMenuForm.name"/>
                    </el-form-item>
                    <el-form-item label="菜单控制界面" prop="linkUrl">
                        <el-input v-model="EditTwoMenuForm.linkUrl"/>
                    </el-form-item>
                    <el-form-item label="菜单层级" prop="path">
                        <el-input v-model="EditTwoMenuForm.path"/>
                    </el-form-item>
                    <el-form-item label="菜单优先级" prop="priority">
                        <el-input v-model="EditTwoMenuForm.priority"/>
                    </el-form-item>
                    <el-form-item label="菜单图标" prop="icon">
                        <el-input v-model="EditTwoMenuForm.icon"/>
                    </el-form-item>
                    <el-form-item label="菜单描述" prop="description">
                        <el-input v-model="EditTwoMenuForm.description"/>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="restEditTwoMenuData()">取 消</el-button>
                    <el-button type="primary" @click="editTwoMenuSure()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </body>

    <script>
        var vue = new Vue({
            el: '#app',
            data:{
                menuList:[],//树形菜单显示数据
                dialogAddOneFormVisible:false,//添加一级弹窗
                dialogAddOneFormValue:'添加一级菜单',//添加一级菜单弹窗的文字
                addOneMenuForm:{},//添加一级菜单弹窗的表单
              //查询栏的文本
              filterText:'',
                dialogAddTwoFormVisible:false,//添加二级菜单弹窗
                dialogAddTwoFormValue:'添加二级菜单',//二级菜单文字
                addTwoMenuForm:{},//添加二级菜单弹窗列表

                dialogEditOneFormVisible:false,//修改一级弹窗
                editOneMenuForm:{},//修改一级菜单表单数据

                dialogEditTwoFormVisible:false,//修改二级弹窗
                EditTwoMenuForm:{}//修改二级菜单表单数据
            },
            watch:{
             filterText(val){
                 this.$refs.menuTree.filter(val)
             }
            },
            created() {
                //获取树形菜单
            this.fetchNodeList()        
            },
            methods: {
             //树形菜单数据----------------------------------------------------------------------------
             //获取树形菜单
             fetchNodeList(){
                 axios.get("/menu/findAllMenu.do").then((res)=>{
                     this.menuList=res.data.data
                     console.log("menuList树形菜单"+this.menuList)
                 })
             },



             //树形菜单数据----------------------------------------------------------------------------
        // 一级菜单操作----------------------------------------------------------------------------------------------
             //打开一级添加菜单
             addOneMenu(id){
               //打开添加弹窗
               this.dialogAddOneFormVisible=true
               //添加一级菜单的夫id
               this.addOneMenuForm.parentMenuId=id
               //添加一级菜单的level
               this.addOneMenuForm.level=1
             },
             //添加一级菜单弹窗点击确定
             appendOneMenu(){
                //axios添加一级级菜单
               axios.post("/menu/addOneMenu.do",this.addOneMenuForm).then((res)=>{
                   if(res.data.flag){
                       this.$message({
                           message:'一级菜单添加成功',
                           type: 'success'
                       })
                   }else{
                       this.$message({
                           message:'一级菜单添加失败',
                           type:'error'
                       })
                   }
               }).finally(()=> {
                   //关闭一级菜单添加
                   this.dialogAddOneFormVisible = false,
                       //清空一级菜单添加表单
                       this.addOneMenuForm = {},
                       //刷新页面
                       this.fetchNodeList()

               })
             },

             //取消添加弹窗
             restOneMenuData(){
                 //清空表单
               this.addOneMenuForm={}
               //关闭弹窗
               this.dialogAddOneFormVisible=false
             },

                //修改一级菜单-----------------------------------------------------------------
                //保存一级修改内容
                editOneMenuSure(){
                    //axios保存一级修改菜单
                    axios.post("/menu/EditMenu.do",this.editOneMenuForm).then((res)=>{
                        if(res.data.flag){
                            this.$message({
                                message:'一级菜单修改成功',
                                type: 'success'
                            })
                        }else{
                            this.$message({
                                message:'一级菜单修改失败',
                                type:'error'
                            })
                        }
                    }).finally(()=> {
                        this.dialogEditOneFormVisible=false
                        this.editOneMenuForm={}
                        this.fetchNodeList()

                    })
                },
                //打开一级修改弹窗
                editOneMenu(row){
                 this.dialogEditOneFormVisible=true
                    this.editOneMenuForm=row
                },
                //取消修改弹窗
                resteditOneMenuData(){
                    this.dialogEditOneFormVisible=false
                    this.editOneMenuForm={}
                    this.fetchNodeList()
                },
         //一级菜单操作-------------------------------------------------------------------------------------

                 //二级菜单操作--------------------------------------------------------------------------------------
                //打开添加二级菜单弹窗
                addTwoMenu(id){
                     this.dialogAddTwoFormVisible=true
                    this.addTwoMenuForm.parentMenuId=id
                    this.addTwoMenuForm.level=2
                },
                //添加二级菜单
                appendTwoMenu(){
                 axios.post("/menu/addTwoMenu.do",this.addTwoMenuForm).then((res)=>{
                     if(res.data.flag){
                         this.$message({
                             message:'二级菜单添加成功',
                             type: 'success'
                         })
                     }else{
                         this.$message({
                             message:'二级菜单添加失败',
                             type:'error'
                         })
                     }
                 }).finally(()=>{
                     this.addTwoMenuForm={}//添加二级菜单弹窗列表
                     this.dialogAddTwoFormVisible=false//添加二级菜单弹窗
                     //刷新页面
                     this.fetchNodeList()
                 })
                },

                restTwoMenuData(){
                 //清空二级菜单表
                    this.addTwoMenuForm={}//添加二级菜单弹窗列表
                    this.dialogAddTwoFormVisible=false//添加二级菜单弹窗
                },

                //修改二级菜单--------------------------------------------------------------------------------
                //保存二级修改
                editTwoMenuSure(){
                    //axios保存一级修改菜单
                    axios.post("/menu/EditMenu.do",this.EditTwoMenuForm).then((res)=>{
                        if(res.data.flag){
                            this.$message({
                                message:'二级菜单修改成功',
                                type: 'success'
                            })
                        }else{
                            this.$message({
                                message:'二级菜单修改失败',
                                type:'error'
                            })
                        }
                    }).finally(()=> {
                        this.dialogEditTwoFormVisible=false
                        this.EditTwoMenuForm={}
                        this.fetchNodeList()

                    })
                },
                //打开二级修改菜单
                editTwoMenu(row){
                    this.dialogEditTwoFormVisible=true//修改二级弹窗
                    this.EditTwoMenuForm=row
                },
                //取消修改
                restEditTwoMenuData(){
                    this.dialogEditTwoFormVisible=false//修改二级弹窗
                    this.EditTwoMenuForm={}//修改二级菜单表单数据
                    this.fetchNodeList()
                },
                //二级菜单操作--------------------------------------------------------------------------------------
                //删除操作
                deleteMenu(id){
                 this.$confirm("您确定要删除此菜单吗?",'提示',{
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                 }).then(()=>{
                     axios.get(`/menu/deleteMenuById/${id}.do`).then((res)=>{
                         if(res.data.flag){
                             this.$message({
                                 message:'删除菜单成功',
                                 type: 'success'
                             })
                         }else{
                             this.$message({
                                 message:'删除菜单失败',
                                 type:'error'
                             })
                         }
                     }).finally(()=>{
                         this.fetchNodeList()
                     })
                 }).catch(()=>{
                     this.$message({
                         type:'info',
                         message:'已取消删除'
                     })
                 });

                }
            }

        })
    </script>
</html>
